<template>
  <div class="">
    <p>轴</p>
    <ul class="list">
      <li v-for="(item,index) in axis">
        <p>{{item.name}}<i class="fa fa-remove" @click="removeAxis(index)"></i></p>
      </li>
      <li>
        <p @drop='dropAxis($event)' @dragover='allowDrop($event)'>拖动数据字段到此处</p>
      </li>
    </ul>
    <p>值</p>
    <ul class="list">
      <li v-for="(item,index) in value">
        <p>{{item.name}}<i class="fa fa-remove" @click="removeValue(index)"></i></p>
      </li>
      <li>
        <p @drop='dropValue($event)' @dragover='allowDrop($event)'>拖动数据字段到此处</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['dashboard', 'canvasItem'],
  data() {
    return {

    }
  },
  computed: {
    axis: function() {
      return this.canvasItem ? this.canvasItem.axis : []
    },
    value: function() {
      return this.canvasItem ? this.canvasItem.value : []
    },
  },
  methods: {
    removeAxis: function(index) {
      this.$parent.canvasItem.axis.splice(index, 1)
    },
    removeValue: function(index) {
      this.$parent.canvasItem.value.splice(index, 1)
    },
    dropAxis: function(event) {
      event.preventDefault();
      if (this.$parent.currentEditIndex === '') {
        return
      }
      let dragObj = this.$parent.dragObj,
        axis = this.$parent.canvasItem.axis
      if (!axis.find((n) => n.index == dragObj.index)) {
        axis.push(dragObj)
      }
    },
    dropValue: function(event) {
      if (this.$parent.currentEditIndex === '') {
        return
      }
      event.preventDefault();
      let dragObj = this.$parent.dragObj,
        value = this.$parent.canvasItem.value
      if (!value.find((n) => n.index == dragObj.index)) {
        value.push(dragObj)
      }
    },
    allowDrop: function(event) {
      event.preventDefault();
    },
  },
  created() {

  },
  components: {},
}
</script>
<style lang="less" scope>
p {
  padding: 0 5px;
}

.list {
  margin: 0 4px;
  padding: 1px 0;
  p {
    width: calc(100% - 12px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 22px;
    margin: 2px;
    border: 1px dashed #666;
    border-radius: 4px;
    background-color: #4a4a4a;
    font-size: 12px;
    padding: 3px 8px;
    .fa {
      float: right;
      line-height: 22px;
      cursor: pointer;
      display: none;
    }
    &:hover {
      .fa {
        display: block;
      }
    }
  }
}
</style>
